<template>
  <ul class="lyric-wrapper overflow-y-auto" ref="list" :style=" {
      transform: `translateY(-${ (offsetY-4) > 0 ? (offsetY-4)* 32 : 0}px)`
  }" :data-value="value">
    
    <li class="lyric-item" :class="i === offsetY && 'active'" v-for="(item,i) in lyric" :key="i">
      {{item.value}}
    </li>
  </ul>
</template>

<script>
export default {
  name: 'lyricWrapper',
  props: {
    data: {
      type: String
    },
    value: {
      type: Number,
    }
  },
  watch : {
    data(n){
      this.formatLyric(n);
    },
    value(n){
      let index = 0;
      
      for(let i=0, len = this.lyric.length ; i < len ; i++){

        if(i === len-1){
          index = i;
          break;
        }
        if( n >= this.lyric[i].time && n < this.lyric[i+1].time){
          index = i;
          break;
        }
      }

      if(index === this.offsetY) return;
      this.offsetY = index;
    },
  },
  data(){
    return {
      lyric: [],
      offsetY: 0
    }
  },
  methods: {
    formatLyric(str){
        this.lyric = str.split('\n').map(item => {
            let params = item.substring(1).split(']');

            return {
                time : doforamtTime(params[0]),
                value: params[1]
            }
        }).filter(i => !isNaN(i.time));

        function doforamtTime(timeStr){
            let [min, sec] = timeStr.split(':').map(i => parseInt(i));
            
            return min*60 + sec;
        }
    },
  }
}
</script>

<style lang="scss" scoped>
  $ratio: 375 / 10;

  @function px2rem($px) {
    @return $px / $ratio + rem;
  }

  .lyric-wrapper {
    position: relative;
    transition: all .2s linear;
    .lyric-item {
      height: 32px;
      line-height: 32px;
      text-align: center;
      color: rgba(255,255,255,.6);
      font-size: px2rem(12);
      transition: all ease .2s;
      &.active {
        color: #f1f1f1;
        font-size: px2rem(16);
      }
    }
  }
  
</style>